import React from 'react';
import { ThemeProvider, CssBaseline } from '@mui/material';
import { createTheme } from '@mui/material/styles';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import ImageEditor from './components/ImageEditor';
import Header from './components/Header';
import { Container } from '@mui/material';

const theme = createTheme({
  palette: {
    primary: {
      main: '#ff2442', // 小红书品牌色
    },
    secondary: {
      main: '#ffa6b5',
    },
  },
  typography: {
    fontFamily: '"PingFang SC", "Microsoft YaHei", sans-serif',
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <DndProvider backend={HTML5Backend}>
        <CssBaseline />
        <Header />
        <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
          <ImageEditor />
        </Container>
      </DndProvider>
    </ThemeProvider>
  );
}

export default App;
